import React, { useState } from 'react'
import {chengshiApi} from '../../api/index'
import { useLoaderData } from 'react-router-dom'
import style from '../../path/chengshi/index.module.css'
import { IndexBar, List } from "antd-mobile";
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom';
import { Button, SearchBar } from "antd-mobile";
import { dingweiApi } from "../../api/index";
import { sousuoApi } from '../../api/index'
import { useSearchParams } from 'react-router-dom';
import { Switch } from "antd-mobile";
import { updata } from "../../path/store/slice/ticketslice";
import { useDispatch } from 'react-redux';

import { useSelector } from 'react-redux';
function Index() {
    const dispatch = useDispatch()
    const nav=useNavigate()
    const loader = useLoaderData()
    const [sp]=useSearchParams()
    console.log(loader)
    const [data, setData] = useState([]);
   
    // 搜索列表
    const onChange = async (kw) => {
      if (kw.length!= 0) {
        const { data: res2 } = await sousuoApi(kw);
        console.log(res2);
        setData(res2);
      } else {
       setData([])
      }
    };
    const gohome = (city) => {
        
    }
  return (
    <div>
      <NavBar onBack={() => nav(-1)}>
        <SearchBar placeholder="请输入内容" onChange={onChange} />
      </NavBar>
      <div>
        <List header="历史搜索">
          {data.map((item, index) => {
            return <List.Item key={index} onClick={()=>gohome(item.name)}>{item.name}</List.Item>;
          })}
        </List>
      </div>
      <div>{loader.sousuoApi}</div>
      <div>当前所在位置:{loader.dingwei}</div>
      <div>
        <ul className={style.op}>
          <p>热门城市:</p>
          {
            // 渲染热门城市
            loader.remen.map((item, index) => {
              return <li key={index}>{item.name}</li>;
            })
          }
        </ul>
      </div>
      <div>
        <IndexBar style={{ height: "800px" }}>
          {loader.liebiao.map((group) => {
            const { title, items } = group;
            return (
              <IndexBar.Panel
                index={title}
                title={`标题${title}`}
                key={`标题${title}`}
              >
                <List>
                  {items.map((item, index) => (
                    <List.Item key={index}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}

export default Index
export const loader = async() => {
    const { data:res} = await chengshiApi()
    console.log(res)
    const { data: res1 } = await dingweiApi("f5bfc79b04c462e3fc06fd25b6c44731");
    console.log(res1)
    return { remen: res.hotCities, liebiao: res.cityList, dingwei: res1.city };
}
